<template>
  <div class="container">
    <h1 class="page-title">编辑商品</h1>

    <!-- 商品编辑表单 -->
    <el-form :model="product" label-width="120px" class="product-form">
      <el-form-item label="商品名称">
        <el-input v-model="product.name" placeholder="请输入商品名称" />
      </el-form-item>

      <el-form-item label="价格">
        <el-input v-model="product.price" type="number" placeholder="请输入商品价格" />
      </el-form-item>

      <el-form-item label="描述">
        <el-input v-model="product.description" type="textarea" placeholder="请输入商品描述" />
      </el-form-item>

      <el-form-item label="图片">
        <el-upload
            :action="`${request.defaults.baseURL}/files/upload`"
            :on-success="handleUploadSuccess"
            list-type="picture-card"
            :show-file-list="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <div class="form-buttons">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="$router.push('/manager/products')">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from "@/utils/request.js";

export default {
  data() {
    return {
      product: {
        id: null,
        name: "",
        price: 0,
        description: "",
        imagePath: "",
      },
    };
  },
  methods: {
    fetchProduct() {
      const id = this.$route.params.id;
      request.get(`/product/selectById/${id}`).then((res) => {
        this.product = res.data;
      });
    },
    handleUploadSuccess(response) {
      this.product.imagePath = response.data;
    },
    submitForm() {
      request.put("/product/update", this.product).then(() => {
        this.$message.success("商品更新成功");
        this.$router.push("/manager/products");
      });
    },
  },
  mounted() {
    this.fetchProduct();
  },
};
</script>

<style scoped>
/* 页面容器样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

/* 标题样式 */
.page-title {
  font-size: 28px;
  color: #004f85;
  margin-bottom: 20px;
}

/* 表单样式 */
.product-form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

/* 上传组件样式 */
.el-upload {
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed #ccc;
}

/* 按钮样式 */
.form-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.el-button {
  padding: 10px 20px;
  border-radius: 4px;
}

.el-button.primary {
  background-color: #004f85;
  color: white;
}

.el-button.primary:hover {
  background-color: #005f99;
}

.el-button {
  background-color: #ccc;
  color: #333;
}

.el-button:hover {
  background-color: #888;
}

/* 样式调整 */
.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

.el-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>
